<template>
  <view class="app-container">
    <title-bar>
      <filter-tab-bar
        @ontap="onFilterTabChange"
        class="bg-white filter-tab-bar"
        align="left"
      ></filter-tab-bar>
    </title-bar>
    <div class="content">
      <scroll-view class="scroll-v" scroll-y>
        <load-more-container
          v-show="currentShowIndex === 0"
          :getList="(per_page, page) => getList(per_page, page, 1)"
        >
          <template #default="{list}">
            <programme-card
              v-for="(item, index) in list"
              :detail="item"
              :key="index"
              class="programme-card"
            ></programme-card>
          </template>
        </load-more-container>
        <load-more-container
          v-show="currentShowIndex === 1"
          :getList="(per_page, page) => getList(per_page, page, 2)"
        >
          <template #default="{list}">
            <programme-card
              v-for="(item, index) in list"
              :detail="item"
              :key="index"
              class="programme-card"
            ></programme-card>
          </template>
        </load-more-container>
        <load-more-container
          v-show="currentShowIndex === 2"
          :getList="(per_page, page) => getList(per_page, page, 3)"
        >
          <template #default="{list}">
            <programme-card
              v-for="(item, index) in list"
              :detail="item"
              :key="index"
              class="programme-card"
            ></programme-card>
          </template>
        </load-more-container>
      </scroll-view>
    </div>
  </view>
</template>

<script>
import FilterTabBar from '@/components/affixTabBar/tabbar.vue'
import TitleBar from '@/components/title-bar/title-bar.vue'
import ProgrammeCard from '@/components/programme-card/base.vue'
import LoadMoreContainer from '@/components/load-more-container/load-more-container.vue'
import { getMyPlanList } from '@/api/plan.js'

export default {
  components: {
    FilterTabBar,
    TitleBar,
    ProgrammeCard,
    LoadMoreContainer,
  },
  data() {
    return {
      myPlanList: [],
      currentShowIndex: 0,
    }
  },
  created() {},
  methods: {
    onFilterTabChange(e) {
      this.currentShowIndex = Number(
        e.target.dataset.current || e.currentTarget.dataset.current
      )
    },
    getList(per_page, page, status) {
      return getMyPlanList({
        per_page,
        page,
        status,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  .filter-tab-bar {
    /deep/.uni-tab-item {
      margin-left: 0;
      flex: 1;
      text-align: center;
    }
  }
  .content {
    flex: 1;
    .card-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      .programme-card {
        &:not(:last-child) {
          margin-bottom: 20upx;
        }
      }
    }
    .scroll-v {
      height: 100%;
    }
  }
}
</style>
